<template>
  <div class="flex-auto w-full relative">
    <div ref="chatContainer" class="absolute top-0 left-0 right-0 bottom-0 z-0">
      <ChatScroll>
        <template v-for="item in chat.messages">
          <div class="w-full last:pb-3" v-if="item.role === 'visitor'">
            <visitor-message :message="item"> </visitor-message>
          </div>
          <div class="w-full last:pb-3" v-else-if="item.role === 'system'">
            <system-message :message="item"></system-message>
          </div>
          <div class="w-full last:pb-3" v-else-if="item.role === 'robot'">
            <robot-message :message="item"></robot-message>
          </div>
          <div class="w-full last:pb-3" v-else>
            <seat-message :message="item"></seat-message>
          </div>
        </template>
      </ChatScroll>
    </div>
  </div>
</template>
<script setup lang="ts">
  import robotMessage from '@/components/Chat/robot-message.vue'
  import seatMessage from '@/components/Chat/seat-message.vue'
  import systemMessage from '@/components/Chat/system-message.vue'
  import visitorMessage from '@/components/Chat/visitor-message.vue'
  import ChatScroll from '@/components/ChatScroll.vue'
  import { useChatStore } from '@/store/chat'
  import { onMounted, ref } from 'vue'
  const chat = useChatStore()
  const chatContainer = ref()
  onMounted(() => {})
</script>

<style scoped></style>
